<!doctype html>
<html lang="en">
  <head>
    <style type="text/css">

    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    form {
      max-width: 500px;
    }

    label,
    textarea {
      display: block;
      margin-bottom: 1em;
    }

    textarea {
      width: 100%;
      font-size: inherit;
    }

    button {
      padding: 0.6em 1em;
      border: 0;
      background-color: hsl(220, 50%, 50%);
      color: white;
      font: inherit;
      transition: background-color 0.3s linear;
    }
    button:hover {
      background-color: hsl(220, 45%, 40%);
    }

    button.is-loading {
      position: relative;
      color: transparent;
    }
    button.is-loading::after {
      position: absolute;
      content: "";
      display: block;
      width: 1.4em;
      height: 1.4em;
      top: 50%;
      left: 50%;
      margin-left: -0.7em;
      margin-top: -0.7em;
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 0.5s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    </style>
  </head>
  <body>
    <form>
      <label for="trip">Tell us about your first trip to the zoo:</label>
      <textarea id="trip" name="about-my-trip" rows="5"></textarea>
      <button type="submit" id="submit-button" class="is-loading">Save</button>
    </form>
  </body>
</html>
